<template>
  <div :class="['card', `is-${messageType}`]">
    <el-form
      :model="ruleForm"
      :rules="rules"
      label-width="auto">
      <div class="card-content">
        <div class="card-content__header">
          <div class="common-sub-title">{{ activeData.initiateTitle }}</div>
          <div class="card-content__header--time">{{ activeData.timeLabel }}<span>2025 年 7 月 17 日</span></div>
        </div>
        <el-form-item :label="activeData.partyLabel">武汉市融资担保有限公司</el-form-item>
        <el-form-item :label="activeData.contentLabel">
          <div>
            <div>尊敬的[客户公司名称]：</div>
            <div>感谢贵司选择我司的保函业务服务。为协助贵司高效完成审核流程，尽快出具保函文件，现需请您协助提供以下资料及说明。</div>
            <div>1.关于{          }的情况说明。</div>
            <div>2.当前银行授信额度使用情况的说明（如有其他金融机构授信，请列明）。</div>
            <div>3.近6个月的银行流水及最新财务报表（资产负债表、利润表）。</div>
            <div>4.简述项目面临如政策变动、供应链延迟时贵司的应对措施。</div>
            <div>我司承诺所有材料严格保密，仅用于本次业务审核。</div>
          </div>
        </el-form-item>
        <el-form-item label="附件">
          <el-text type="warning">资料提交核对清单.pdf</el-text>
        </el-form-item>
      </div>
      <div class="card-content">
        <div class="card-content__header">
          <div class="common-sub-title">{{ activeData.replyTitle }}</div>
        </div>
        <el-form-item label="调研回复方">a188888888</el-form-item>
        <el-form-item :label="activeData.opinionLabel" prop="content">
          <el-input
            v-if="messageType=='supplement'"
            v-model.trim="ruleForm.content"
            :autosize="{ minRows: 2 }"
            type="textarea"
            resize="none"/>
          <template v-else>---</template>
        </el-form-item>
        <el-form-item label="材料上传">
          <c-upload>
            <el-icon class="iconfont icon-shangchuanwenjian" />
          </c-upload>
        </el-form-item>
      </div>
      <div class="card-footer">
        <el-button v-if="messageType=='supplement'">提交</el-button>
        <el-icon v-else class="iconfont icon-yiqueren" />
      </div>
    </el-form>
  </div>
</template>

<script setup>
const props = defineProps({
  // 调研类型(补充、更正)
  messageType: {
    type: String,
    default: 'supplement',
    values: ['supplement', 'amend'],
  },
})

const typeData = reactive({
  // 补充
  supplement: {
    initiateTitle: '补充调研',
    replyTitle: '调研回复',
    timeLabel: '调研发起',
    partyLabel: '调研发起方',
    contentLabel: '调研内容',
    opinionLabel: '回复内容'
  },
  // 更正
  amend: {
    initiateTitle: '信息更正',
    replyTitle: '更正确认',
    timeLabel: '更正时间',
    partyLabel: '信息更正方',
    contentLabel: '更正内容',
    opinionLabel: '更正意见'
  },
})

const activeData = computed(() => {
  return typeData[props.messageType]
})


const ruleForm = reactive({
  // 回复内容
  content: ''
})
const rules = reactive({

})
</script>

<style lang="scss" scoped>
.card{
  padding: 20px;
  border-radius: 6px;
  border: 2px solid var(--color-type);
  --color-type: #FC7000;
  &.is-amend{
    --color-type: #377B1F;
  }
  &-content{
    & + &{
      padding-top: 20px;
      border-top: 2px dashed var(--color-type);
    }
    &__header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      &--time{
        color: #362828;
        span{
          font-weight: 700;
          margin-left: 10px;
        }
      }
      .common-sub-title{
        --subtitle-text-color: var(--color-type);
        --subtitle-line-color: var(--color-type);
      }
    }
  }
  &-footer{
    text-align: end;
    :deep(.el-icon){
      font-size: 150px;
      color: var(--color-type);
    }
  }
  :deep(.el-form){
    .el-form-item__content{
      color: #362828;
      font-weight: 700;
    }
    .el-upload .el-icon{
      color: #B7482E;
      font-size: 25px;
      font-weight: normal;
    }
  }
}
</style>
